<script setup lang="ts">
import { ref } from 'vue'
import type { Banners, DailyRecommendations, Notice, PageParams } from '@/types/home.d'
import {
  loadBaneerUsingGet,
  loadDailyRecommendationsUsingGet,
  loadNoticeDetailGet,
  loadWeatherGet,
} from '@/services/home'
import TmsSwiper from '@/components/TmsSwiper.vue'
import { onLoad } from '@dcloudio/uni-app'
import IndexNavbar from '@/pages/index/components/IndexNavbar.vue'
import IndexCategory from '@/pages/index/components/IndexCategory.vue'
import IndexWeather from '@/pages/index/components/IndexWeather.vue'
import IndexViews from '@/pages/index/components/IndexViews.vue'
import IndexSkeletion from '@/pages/index/components/IndexSkeletion.vue'
import IndexGuide from '@/pages/index/components/IndexGuide.vue'
// 获取通知公告数据
const noticeList = ref<Notice[]>([])
const loadNoticeUsingGetData = async () => {
  const res = await loadNoticeDetailGet()
  noticeList.value = res.data
}
// 获取轮播图数据
const bannerList = ref<Banners[]>([])
const loadBaneerUsingGetData = async () => {
  const res = await loadBaneerUsingGet()
  bannerList.value = res.data
}
const weatherData = ref<any>('')
const getWeather = async () => {
  const res = await loadWeatherGet()
  weatherData.value = res.msg
}
const dailyRecommendationList = ref<DailyRecommendations[]>()

const loadDailyRecommendationsUsingGetData = async () => {
  const res = await loadDailyRecommendationsUsingGet({ pageNum: 1, pageSize: 5 })
  dailyRecommendationList.value = res.data.data
}

const guideRef = ref<IndexGuide>()
const onScrollToLower = () => {
  guideRef.value?.getMore()
}
// 在所有数据加载完成后执行的操作
const afterAllDataLoaded = () => {}
const isLoading = ref(false)
onLoad(async () => {
  isLoading.value = true
  await Promise.all([
    loadNoticeUsingGetData(),
    loadBaneerUsingGetData(),
    getWeather(),
    loadDailyRecommendationsUsingGetData(),
  ]).then(afterAllDataLoaded)
  isLoading.value = false
})
//自定义下拉刷新被触发
const isTriggered = ref(false)
const onRefresherRefresh = async () => {
  //开始动画
  isTriggered.value = true
  //重置数据
  guideRef.value?.resetData()
  //一个一个请求太慢，需要同时发送请求，但等到全部加载完成后在结束 使用  Promise.all()
  await Promise.all([
    loadNoticeUsingGetData(),
    loadBaneerUsingGetData(),
    getWeather(),
    loadDailyRecommendationsUsingGetData(),
    guideRef.value?.getMore(),
  ])
  //结束动画
  isTriggered.value = false
}
</script>

<template>
  <index-navbar :list="noticeList"></index-navbar>
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherRefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrollToLower"
    scroll-y
    class="scroll-view"
  >
    <index-skeletion v-if="isLoading"> </index-skeletion>
    <template v-else>
      <TmsSwiper :list="bannerList" />
      <index-category />
      <index-weather :weatherData="weatherData"></index-weather>
      <index-views :viewsList="dailyRecommendationList"></index-views>
      <index-guide ref="guideRef"></index-guide>
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}

.index-navbar {
  height: 16vh;
}
</style>
